<template>
  <views class="facilitator_client_manager">
    <viewTitle :title="'客户经理'" :border="false"></viewTitle>

    <!-- 新增/修改 -->
    <!-- 新增/修改 模态框 -->
    <div class="add">
      <modelBox :show="add_customer_show">
        <div class="add_lists">
          <div class="flex flexR add_lists_title">
            <viewTitle :title="type==1?'新增客户经理':'修改客户经理'" :border="false"></viewTitle>
            <div class="el-icon-close cp" @click="close_Model"></div>
          </div>
          <div class="add_input_lists" v-if="type==2">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">编号:</div>
              <div class="add_input_lists_item">
                <el-input placeholder v-model="client_manager_sn" disabled clearable></el-input>
              </div>
            </div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">姓名:</div>
              <div class="add_input_lists_item">
                <el-input placeholder="请输入姓名" v-model="name" clearable></el-input>
              </div>
            </div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">身份证号:</div>
              <div class="add_input_lists_item">
                <el-input placeholder="请输入身份证号" v-model="identity_card" clearable></el-input>
              </div>
            </div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">手机号码:</div>
              <div class="add_input_lists_item">
                <el-input placeholder="请输入手机号码" v-model="phone" clearable></el-input>
              </div>
            </div>
          </div>
          <!-- 确认 取消 -->
          <div class="Confirm_cancel flex flexR center">
            <el-button type="primary" @click="saveClientManager">确定</el-button>
            <el-button type @click="close_Model">取消</el-button>
          </div>
        </div>
      </modelBox>
    </div>

    <!-- 离职 -->
    <div class="dimission">
      <modelBox :show="dimission_show">
        <div class="add_lists">
          <div class="flex flexR add_lists_title">
            <viewTitle :title="'交接客户经理'" :border="false"></viewTitle>
            <div class="el-icon-close cp" @click="close_Model"></div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">交接客户经理:</div>
              <div class="add_input_lists_item">
                <el-select v-model="customer_manager" clearable placeholder="请选择">
                  <el-option
                    v-for="item in customer_manager_list"
                    :key="item.client_manager_id"
                    :label="item.client_manager_name"
                    :value="item.client_manager_id"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
          <!-- 确认 取消 -->
          <div class="Confirm_cancel flex flexR center">
            <el-button type="primary" @click="to_dimission">确定</el-button>
            <el-button type @click="close_Model">取消</el-button>
          </div>
        </div>
      </modelBox>
    </div>

    <!-- 搜索栏  服务商端 -->
    <div class="search flex flexC">
      <!-- 客户经理编号-客户经理姓名-联系电话-状态 -->
      <el-form ref="form" label-width="auto" :inline="true">
        <div class="search_input flex flexR center">
          <div class="their_facilitator flex flexR center">
            <el-form-item label="客户经理编号:">
              <el-input
                v-model="all.form.client_manager_sn"
                placeholder="请输入客户经理编号"
                :clearable="true"
              ></el-input>
            </el-form-item>
          </div>
          <div class="bank_statement flex flexR center">
            <el-form-item label="客户经理姓名:">
              <el-input v-model="all.form.user_name" placeholder="请输入客户经理姓名" :clearable="true"></el-input>
            </el-form-item>
          </div>
          <div class="customer_number flex flexR center">
            <el-form-item label="联系电话:">
              <el-input v-model="all.form.mobile" placeholder="请输入联系电话" :clearable="true"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-form ref="form" label-width="auto" :inline="true">
        <!--  按钮 (查询、重置、新增)-->
        <div class="pay_btn flex">
          <div class="pay_state flex flexR center">
            <el-form-item label="状态:">
              <el-select v-model="all.form.status" clearable placeholder="请选择">
                <el-option
                  v-for="item in all.form.state_list"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- 按钮（查询、重置、新增） -->
          <el-form-item>
          <div class="flex flexR pay_btn_list">
            <el-button type="primary" @click="query">查询</el-button>
            <el-button @click="reset">重置</el-button>
            <el-button type="danger" @click="add_customer(1)" v-if="isAdd" >新增</el-button>
          </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- 展示列表 -->
    <div class="table_list">
      <el-table
        border
        :data="all.tableData"
        style="width: 100%;max-width:none;"
        :header-cell-style="getRowClass"
        :select-on-indeterminate="true"
        :fit="true"
        :lazy="true"
        @row-click="clickRow"
        max-height="450"
      >
        <el-table-column fixed type="index" label="序号" width="100"></el-table-column>
        <el-table-column fixed prop="client_manager_sn" label="客户经理编号" width="300"></el-table-column>
        <el-table-column prop="user_name" label="客户经理姓名" width="150"></el-table-column>
        <el-table-column prop="certificate" label="身份证号" width="300"></el-table-column>
        <el-table-column prop="mobile" label="联系号码" width="150"></el-table-column>
        <el-table-column prop="status_name" label="状态" width="120"></el-table-column>
        <el-table-column prop="created_time_desc" label="创建时间" width="200"></el-table-column>
        <el-table-column prop="zip" label="操作" fixed="right" width="300" v-if="isEdit || isFreeze || isOver" >
          <div class="table_operation flex flexR" slot-scope="scope">
            <el-button type="primary" @click="add_customer(2,scope.row)" v-if="isEdit">修改</el-button>
            <el-button
              type="warning"
              @click="freeze(scope.row)"
              v-if="(scope.row.status==1||scope.row.status==3) && isFreeze"
            >{{scope.row.status==1?'冻结':'解冻'}}</el-button>
            <el-button v-if="scope.row.status != 2 && isOver" type="danger" @click="dimission(scope.row)">离职</el-button>
          </div>
        </el-table-column>
      </el-table>
      <div class="paging flex flexR">
        <el-pagination
          style="background:#fff; padding:10px 0"
          background
          layout="total, sizes,prev, pager, next, jumper"
          @size-change="(page_size) => {this.pagination.page_size = page_size;this.getData()}"
          @current-change="(page_size) => {this.pagination.page_start = page_size;this.getData()}"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pagination.page_size"
          :total="pagination.total_count"
          :current-page="pagination.current_page"
          :page-count="pagination.page_count"
        ></el-pagination>
      </div>
    </div>
  </views>
</template>



<script>
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      //    服务商端
      all: {
        form: {
          client_manager_sn: "", // 客户经理编号
          user_name: "", // 客户经理姓名
          mobile: "", // 联系电话
          status: "", // 状态
          state_list: [
            { value: "1", label: "正常" },
            { value: "2", label: "离职" },
            { value: "3", label: "冻结(注销)" }
          ]
        },
        tableData: []
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      //  新增客户经理
      add_customer_show: false, // 新增客户经理 展示
      name: "", // 姓名
      identity_card: "", // 身份证
      phone: "", // 手机号
      type: 1, // 1 新增 2 修改
      serial_number: "", // 编号
      // 离职
      dimission_show: false, // 离职展示
      customer_manager: "", // 客户经理
      customer_manager_list: [], // 客户经理列表
      pagination: {
        current_page: 1,
        page_size: 10,
        page_start: 1
      }, // 分页
      client_manager_id: "", // 客户经理-id
      client_manager_sn: "" // 客户经理编号
    };
  },
  mounted() {
    this.getData();
    this.getSimpleClientManagers();
  },
  computed: {
    //实时计算要传输的编辑参数
    post_data() {
      let data = {};
      data.client_manager_sn = this.all.form.client_manager_sn; // 客户经理编号
      data.user_name = this.all.form.user_name; // 客户经理姓名
      data.mobile = this.all.form.mobile; // 联系电话
      data.status = this.all.form.status; // 状态
      data.pagination = this.pagination;
      return data;
    },
    ...mapGetters(['getButtonPermission']),
    isAdd(){
      return  this.getButtonPermission[this.$route.path] && this.getButtonPermission[this.$route.path].add ? 1 : 0;
    },
    isEdit(){
      return  this.getButtonPermission[this.$route.path] && this.getButtonPermission[this.$route.path].edit ? 1 : 0;
    },
    isFreeze(){
      return  this.getButtonPermission[this.$route.path] && this.getButtonPermission[this.$route.path].freeze ? 1 : 0;
    },
    isOver(){
      return  this.getButtonPermission[this.$route.path] && this.getButtonPermission[this.$route.path].over ? 1 : 0;
    },

  },
  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //     点击单行
    clickRow(row, column, event) {
      console.log(row, column, event);
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    close_Model() {
      this.add_customer_show = false;
      this.dimission_show = false;
      this.clear();
    },
    // 新增
    add_customer(val, scope) {
      this.add_customer_show = true;
      this.type = val;
      if (this.type == 2) {
        console.log("scope", scope);
        this.name = scope.user_name; // 姓名
        this.identity_card = scope.certificate; // 身份证
        this.phone = scope.mobile; // 手机号
        this.client_manager_id = scope.client_manager_id; // 客户经理-id
        this.client_manager_sn = scope.client_manager_sn; // 客户经理编号
      }
    },
    // 冻结
    freeze(scope) {
      console.log("ssssssss", scope);
      this.$confirm(
        `是否确认${scope.status == 1 ? "冻结" : "解冻"}、客户经理-${
          scope.user_name
        }?`,
        `${scope.status == 1 ? "冻结" : "解冻"}`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.changeClientManagerStatus(scope.status, scope.client_manager_id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${scope.status == 1 ? "冻结" : "解冻"}`
          });
        });
    },
    // 离职
    dimission(scope) {
      this.client_manager_id = scope.client_manager_id;
      let code = this.getSimpleClientManagers();
      if (code == 200) {
        this.dimission_show = true;
      }
    },
    // 客户经理列表
    getData() {
      let data = this.$api.sendSync(
        this.$mapapi.f_clientManagerList,
        this.post_data
      );
      console.log("查询返回", data);
      this.all.tableData = data.data.list || [];
      this.pagination = data.data.pagination || {};
    },
    getSimpleClientManagers() {
      let datag = {};
      datag.client_manager_id = this.client_manager_id;
      let data = this.$api.sendSync(
        this.$mapapi.f_getSimpleClientManagers,
        datag
      );
      this.customer_manager_list = data.data || [];
      console.log("客户经理列表", this.customer_manager_list);
      return data.code;
    },
    // 新增-编辑
    saveClientManager() {
      let datas = {};
      datas.user_name = this.name;
      datas.certificate = this.$toU(this.identity_card);
      datas.mobile = this.phone;
      if (this.type == 2) {
        datas.client_manager_id = this.client_manager_id;
        datas.client_manager_sn = this.client_manager_sn;
      }
      if (!this.$validator().isCard(datas.certificate)) {
        this.$message.error("请输入正确的身份号码");
        return;
      }
      if (!this.$validator().isMobile(datas.mobile)) {
        this.$message.error("请输入正确的手机号码");
        return;
      }

      let data = this.$api.sendSync(this.$mapapi.f_saveClientManager, datas);
      if (data.code != 200 && data.code != 501) {
        this.$message.error(data.msg);
        return;
      }

      this.$message.success(data.msg);
      this.add_customer_show = false;
      this.dimission_show = false;
      this.getData();
    },
    // 修改-状态
    changeClientManagerStatus(status, client_manager_id) {
      let datas = {};
      let return_status = status => {
        return status == 1 ? 3 : status == 3 ? 1 : 2;
      };
      datas.status = return_status(status);
      datas.client_manager_id = client_manager_id;
      if (status == 2) {
        datas.new_client_manager_id = this.customer_manager;
      }
      let data = this.$api.sendSync(
        this.$mapapi.f_changeClientManagerStatus,
        datas
      );
      if (data.code != 200) {
        this.$message.error(data.msg);
        return;
      }
      this.$message({
        type: "success",
        message: `${status == 1 ? "冻结" : status == 3 ? "解冻" : "离职"}成功!`
      });
      this.getData();
      this.clear();
      this.dimission_show = false;
    },
    // 确认-离职
    to_dimission() {
      if (!this.client_manager_id) {
        this.$message.error("请选择客户经理");
        return;
      }
      this.changeClientManagerStatus(2, this.client_manager_id);
    },
    // 清空弹框
    clear() {
      this.name = ""; // 姓名
      this.identity_card = ""; // 身份证
      this.phone = ""; // 手机号
      this.customer_manager = ""; // 客户经理
      this.client_manager_id = ""; // 客户经理-id
      this.client_manager_sn = ""; // 客户经理编号
      this.link_phone = "";
    },
    // 查询
    query() {
      this.getData();
    },
    // 重置
    reset() {
      this.all.form.client_manager_sn = ""; // 客户经理编号
      this.all.form.user_name = ""; // 客户经理姓名
      this.all.form.mobile = ""; // 联系电话
      this.all.form.status = ""; // 状态
      this.getData();
    }
  },
  created() {}
};
</script>


<style lang="less" :scope="true"  src="@/style/marketRegulation/facilitator_client_manager.less" >
</style>